/**
 * Created by huotaol on 2017/4/27.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import MineItem from "../../components/MineItem";
import {Actions} from "react-native-router-flux";
import Util from "../../main/Util";
import * as MineAction from "../../redux/action/Mine";
import * as CommonUtil from "../../../common/util/Util";

class MineUI extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        const user = this.props.userData;

        const titleHandleList = [];
        console.log('mine   ' + this.props.collectionCount);
        titleHandleList.push(new TitleBean(this.props.collectionCount, '收藏车辆', null));
        titleHandleList.push(new TitleBean(this.props.auctionCount, '卖车记录', () => {
            Actions.OrderSoldCarUI();
        }));
        titleHandleList.push(new TitleBean(this.props.viewCount, '浏览记录', () => {
            Actions.ViewCollect();
        }));

        const settingList = [];
        if (user.info
            && user.token
            && user.id) {
            settingList.push(new SettingBean(require('../../../img/mine/mine_order.png'), '我的评估', () => {
                Actions.MyEstimate();
            }, true));

            if (user.info.authinput.toString() === '200') {
                settingList.push(new SettingBean(require('../../../img/mine/mine_data.png'), '车辆数据录入', () => {
                    Actions.RecordedCarList({
                        name: 'RecordedCarList',
                    });
                }, true));
                settingList.push(new SettingBean(require('../../../img/mine/help_look.png'), '帮看数据录入', () => {
                    Actions.RecordList();
                }, true));
            }
        }
        settingList.push(new SettingBean(require('../../../img/mine/mine_phone.png'), '联系客服', () => {
            CommonUtil.callPhone(CommonUtil.OFFICIAL_PHONE_NUMBER);
        }, true));

        return (
            <ScrollView
                showsVerticalScrollIndicator={false}
                style={{backgroundColor: '#FFFCEE'}}>
                <View style={{flex: 1, paddingTop: CustomStyle.navBasePaddingTop,}}>
                    <Image
                        style={{
                            position: 'absolute',
                            left: 0,
                            top: 0,
                            width: CustomStyle.screenWidth,
                            height: CustomStyle.getActualSizeInVertical(520),
                        }}
                        source={require('../../../img/mine/mine_background.png')}/>
                    <TouchableOpacity
                        style={[, {}]}
                        onPress={() => {
                            Actions.Settings();
                        }}
                    >
                        <Image source={require('../../../img/mine/mine_setting_small.png')} style={{
                            height: CustomStyle.getActualSizeInVertical(46),
                            width: CustomStyle.getActualSizeInHorizontal(46),
                            marginTop: CustomStyle.getActualSizeInVertical(45),
                            marginRight: CustomStyle.getActualSizeInHorizontal(30),
                            alignSelf: 'flex-end',
                        }}/>
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={{
                            flexDirection: 'row', alignItems: 'center',
                            marginTop: CustomStyle.getActualSizeInVertical(30),
                            marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        }}
                        activeOpacity={1.0}
                        onPress={() => {
                            const user = Util.getUser();
                            if (!user.token && !user.id) {
                                Actions.Mine();
                            }
                        }}
                    >
                        <View style={{
                            width: CustomStyle.getActualSizeInHorizontal(220),
                            height: CustomStyle.getActualSizeInHorizontal(220),
                            alignItems: 'center',
                            justifyContent: 'center',
                            borderColor: '#ff9c00',
                            borderRadius: CustomStyle.getActualSizeInHorizontal(110),
                            borderWidth: CustomStyle.getActualSizeInHorizontal(2),
                        }}>
                            <Image source={require('../../../img/mine/default.png')} style={{
                                width: CustomStyle.getActualSizeInHorizontal(200),
                                height: CustomStyle.getActualSizeInHorizontal(200),
                                borderRadius: CustomStyle.getActualSizeInHorizontal(100),
                            }}/>
                        </View>


                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(36),
                            color: '#ffffff',
                            marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        }]}>{user.phone ? user.phone : '点击这里登录'}</Text>

                    </TouchableOpacity>
                    {/*    <View style={[styles.shadow, {
                     height: CustomStyle.getActualSizeInVertical(200),
                     justifyContent: 'space-around',
                     marginTop: CustomStyle.getActualSizeInVertical(27),
                     flexDirection: 'row',
                     backgroundColor: 'white',
                     alignItems: 'center',
                     }]}>
                     {titleHandleList.map(item => {
                     return <Title number={item.number} title={item.title} click={item.click}/>
                     })}
                     </View>*/}
                    <View style={[styles.shadow, {
                        marginTop: CustomStyle.getActualSizeInVertical(20),
                        flex: 1,
                    }]}>
                        {settingList.map(item => {
                            return <MineItem imageUri={item.image} title={item.title} click={item.click}
                                             showArrow={item.showArrow} rightText={item.rightText}/>
                        })}
                    </View>
                </View>
            </ScrollView>

        );
    }
}

class TitleBean {
    constructor(number, title, click) {
        this.number = number;
        this.title = title;
        this.click = click;
    }
}

class SettingBean {
    constructor(image, title, click, showArrow, ...param) {
        this.image = image;
        this.title = title;
        this.click = click;
        this.showArrow = showArrow;
        console.log('mein param ' + param);
        this.rightText = param[0];
    }
}

class Title extends Component {
    static propTypes = {
        number: PropTypes.number,
        title: PropTypes.string,
        click: PropTypes.func,
    };

    render() {
        console.log('title  ' + this.props.number);
        return (
            <TouchableOpacity onPress={this.props.click} style={{alignItems: 'center',}}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(48),
                    color: '#ffc000',
                    fontWeight: 'bold',
                }]}>{this.props.number}</Text>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(30),
                    color: '#4a3d18',
                    marginTop: CustomStyle.getActualSizeInVertical(40),
                }]}>{this.props.title}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    shadow: {
        backgroundColor: '#ffffff',
        borderRadius: CustomStyle.getActualSizeInHorizontal(10),
        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
        marginRight: CustomStyle.getActualSizeInHorizontal(20),
    },
});

const mapStateToProps = (state) => {
    const {collection, auction, view, userData} = state;
    console.log(' mapStateToProps ' + view.count);
    return {
        collectionCount: collection.count,
        auctionCount: auction.count,
        viewCount: view.count,
        userData: userData,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateUser: param => dispatch(MineAction.userData(param)),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(MineUI);